<template>
	<view>
		
		<view class="head flex-no-horizontal">
			<view class="head-right flex-no-horizontal">
				<view class="head-right-icon" @click="toUserInfo(record)">
					<image :src="record.avatar" mode=""></image>
					<view class="uni-badge" v-if=" ifReadShow ? !ifRead : !ifAlreadyRead"></view>
				</view>
				<view class="head-right-name-time"> 
					<view class="name flex-no-horizontal" :class="{'already-read':ifReadShow ? ifRead : ifAlreadyRead}">
						{{record.username}}
						<text v-if="!ifComment">点赞了你的</text>
					</view>
					<view class="time"> 
						{{record.createdAt | date}} 
					</view>
				</view>
			</view>
		</view>
		
		<view class="main-bottom">
			<view class="main-comment-text" :class="{'already-read':ifReadShow ? ifRead : ifAlreadyRead}" v-if="ifComment" @click="toDynamicDetail(record.articleId)">
				评论了你：{{record.content}}
			</view>
			<view style="height: 30rpx;" v-if="!ifComment"></view>
			<view class="main-content flex-no-horizontal" @click="toDynamicDetail(record.articleId)">
				
				<view class="main-content-left" v-if="record.fileName !== ''">
					<image :src="(record.fileName.split(','))[0]" mode="scaleToFill"></image>
				</view>
				
				<view class="main-content-right">
					<view class="name" :class="{'already-read':ifReadShow ? ifRead : ifAlreadyRead}">
						{{record.ausername}}
					</view>
					<view class="content-text">
						{{record.text}}
					</view>
				</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {readLikeAddApi,readcommentsAddApi} from '../../../api/index.js'
	export default {
		props: {
			ifAlreadyRead: {				//是否已读
				type: Boolean,
				default () {
					return true;
				}
			},
			ifComment: {				//点赞or评论
				type: Boolean,
				default () {
					return true;
				}
			},
			record: {				//数据
				type: Object,
				default () {
					return {};
				}
			},
		},
		data() {
			return {
				ifRead:this.ifAlreadyRead,
				ifReadShow:false
			};
		},
		computed: {
	
		},
		onLoad() {
	
		},
		methods: {
			//跳转动态详情
			async toDynamicDetail(id) {
				try{
					
					if(this.ifComment){
						//评论单个已读
						const commentRes = await readcommentsAddApi({
							commentIds:[this.record.id],
							isAll:0
						})
					}else{
						//点赞单个已读
						const likeRes = await readLikeAddApi({
							giveLikeIds:[this.record.id],
							isAll:0
						})
					}
					this.ifReadShow = true
					this.ifRead = true
					uni.navigateTo({
						url: '../community/dynamicDetail?id=' + id
					})
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},
			
			//跳转用户信息
			toUserInfo(item){
				uni.navigateTo({
					url:'/pages/community/userInfo?userId=' + item.userId,
				})
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	
	.head {
		justify-content: space-between;
	
		.head-right {
	
			.head-right-icon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				position: relative;
				.uni-badge{
					position: absolute;
					top: 0;
					right: 0;
					width: 15rpx;
					height: 15rpx;
					background: #FF4E4F;
					border-radius: 50%;
					border: 4rpx solid #FFFFFF;
				}
				image {
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-circle;
				}
			}
	
			.head-right-name-time {
	
				.name {
					justify-content: space-between;
					font-size: $uni-font-size-lg;
					color: $uni-color-black;
					margin-bottom: 10rpx;
					
					text{
						margin-left: 30rpx;
					}
					
					image {
						margin-left: 18rpx;
						width: 34rpx;
						height: 34rpx;
						border-radius: $uni-border-radius-circle;
					}
	
				}
	
				.time {
					font-size: 22rpx;
					color: rgba(143, 144, 145, 1);
				}
	
			}
	
		}
	
	}
	
	.main-bottom{
		margin-left: 101rpx;
	}
	
	.main-comment-text{
		margin: 30rpx 0 30rpx 0;
		font-size: $uni-font-size-lg;
		color: $uni-color-black;
		line-height: 56rpx;
		word-break: break-word;
	}
	
	.main-content{
		margin-bottom: 40rpx;
		height: 160rpx;
		border-radius: 10rpx;
		background-color: rgba(247, 247, 247, 1);
		
		.main-content-left{
			
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
			
		}
		
		.main-content-right{
			padding: 28rpx 31rpx;
			
			.name{
				font-size: 26rpx;
				color: $uni-color-black;
				margin-bottom: 10rpx;
			}
			
			.content-text{
				font-size: 26rpx;
				color: rgba(143, 144, 145, 1);
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-word;
			}
		}
		
	}
	
	.already-read{
		color: rgba(143, 144, 145, 1);
	}
	
</style>
